<template>
  <div class="container">
    <Navbar :title="'陪护证详情'"></Navbar>
    <div class="content">
      <div class="content-header">
        <h1>已生效</h1>
        <p>
          {{ nowTime }}
        </p>
        <p></p>
      </div>
      <div class="content-detail">
        <img src="@/assets/tabs/111.png" alt="" />
        <div style="display: flex; justify-content: start; align-items: center">
          <h3 style="margin-right: 10px">{{ item.name }}</h3>
          <h3>{{ item.checked === 1 ? "男" : "女" }}</h3>
        </div>
        <p>身份证号:{{ item.id }}</p>
        <p>申请时间:{{ moment(item.time).format("YYYY-MM-DD HH:mm:ss") }}</p>
        <p>
          有效时间:{{ moment(item.time).format("YYYY-MM-DD") }}至{{
            moment(item.time).add(30, "days").format("YYYY-MM-DD")
          }}
          <!-- 截止到30天后 -->
        </p>
        <p style="margin-top: 10px">
          住院陪护证有效期剩余
          <span style="color: rgb(9, 186, 218)">
            {{
              moment(item.time).add(30, "days").diff(moment(), "days")
            }} </span
          >天
        </p>
      </div>
      <div class="content-detail1">
        <h3>住院患者</h3>
        <p>
            住院人：{{ item.username }}
        </p>
        <p>住院号：{{ item.adNumber }}</p>
        <p>住院病区：{{ item.curAddress }}</p>
        <p>住院床号：{{ item.bed }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from "./component/Navbar.vue";
import moment from "moment";
import axios from "axios";
import { computed, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
let route = useRoute();
let router = useRouter();
const item = ref<Item>({
  _id: "",
  time: new Date(),
  adNumber: "",
  username: "",
  curAddress: "",
  bed: "",
  checked: 0,
  contactPhone: 0,
  name: "",
  id: 0,
});

interface Item {
  _id: string;
  time: Date;
  adNumber: string;
  username: string;
  curAddress: string;
  bed: string;
  checked: Number;
  contactPhone: Number;
  name: string;
  id: Number;
}
onMounted(() => {
  getItem();
});
const getItem = async () => {
  let {
    data: { data },
  } = await axios.post("http://localhost:3000/zhc/getItem", {
    _id: route.query._id,
  });
  item.value = data;
  console.log(data);
};

const nowTime = computed(() => {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
});

const timeFormat = (time: Date) => {
  //   将time变为yy-mm-dd :hh-mm-ss
  return time.toLocaleString();
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .content {
    width: 100%;
    height: calc(100vh - 46px);
    margin-top: 44px;
    padding: 0px 15px;
    box-sizing: border-box;
    background-color: rgb(242, 242, 239);
    overflow: hidden;
    .content-header {
      width: 100%;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      background-color: rgb(218, 255, 252);
      padding: 0px 15px;
      box-sizing: border-box;
      margin-top: 15px;
      color: rgb(9, 186, 218);
      padding: 15px 0px;
      text-align: center;
      box-sizing: border-box;
    }
    .content-detail {
      overflow: hidden;
      background-color: white;
      padding: 15px;
      box-sizing: border-box;
      img {
        width: 80px;
      }
      line-height: 30px;
      border-radius: 10px;
    }
    .content-detail1 {
      margin-top: 10px;
      width: 100%;
      overflow: hidden;
      background-color: white;
      padding: 15px;
      box-sizing: border-box;
      img {
        width: 80px;
      }
      line-height: 30px;
      border-radius: 10px;
    }
  }
}
</style>